<template>
  <div>
    <el-dialog v-model="dialogVisible" title="新增护工" width="800" :before-close="handleClose">
      <el-form :model="ruleForm" :inline=true label-width="auto">
        <el-form-item label="姓名">
          <el-input v-model="ruleForm.name" placeholder="请输入" clearable style="width: 140px;" />
        </el-form-item>

        <el-form-item label="所属岗位:">
          <el-select v-model="ruleForm.roleId" placeholder="请选择" clearable style="width: 240px;">
            <el-option v-for="item in roleList" :key="item.id" :label="item.name"
              :value="item.id as unknown as string" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <ELTable v-bind="tableConfig" ref="careeTable">
        <template #roles="{ scope }">
          {{ scope.row.roles.map((item: role) => item.name).join(" ") }}
        </template>

        <template #operate="{ scope }">
          <el-button v-if="scope.row.isCarer === 0" type="primary" @click="add(scope.row)">选择</el-button>
          <el-button v-else type="danger" @click="cancel(scope.row)">取消选择</el-button>
        </template>
      </ELTable>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import ELTable, { TableData } from '@/components/ELTable.vue'
import { staffCarerAdd, staffList, staffUpdate } from '@/api/personel/staff/staff';
import { role } from '@/api/personel/staff/type'
import { RoleList } from '@/api/personel/position/position'
import { listData, listParams } from '@/api/personel/position/type'

const dialogVisible = ref(true);

const ruleForm = reactive({
  name: '',
  roleId: undefined,
})

// 岗位列表
const RoleParams = reactive<listParams>({
  page: 1,
  pageSize: 1000
})
const roleList = ref<listData[]>([])
const getRoleList = async () => {
  let res = await RoleList(RoleParams)
  roleList.value = res.list
}

// 选择
let arr = ref<any[]>([]);
const add = (data: any) => {
  if (data.isCarer === 0) {
    data.isCarer = 1;
    arr.value.push(data.id);
    console.log("添加id", arr.value);
  }
};

// 取消选择
const cancel = async (data: any) => {
  if (data.isCarer === 1) {
    data.isCarer = 0;
    console.log('数据', data);

    arr.value = arr.value.filter(item => item !== data.id);
    // console.log("取消id", arr.value);
    let res = await staffUpdate(data)
    console.log(res);

    ElMessage.success('修改成功')
    emit('close')
  }
};

// 添加
const submit = async () => {
  if (arr.value.length === 0) {
    ElMessage.error("请选择护工");
    return;
  }
  let res = await staffCarerAdd(arr.value);
  // console.log('添加', res);
  ElMessage.success('添加成功')
  emit('close')

}

// 搜索
const careeTable = ref()
const search = () => {
  careeTable.value.getData(ruleForm)
}

// 重置
const reset = () => {
  ruleForm.name = ''
  ruleForm.roleId = undefined
  careeTable.value.getData()
}




// 表格
const tableConfig = reactive<TableData>({
  loadData: staffList,
  columns: [
    {
      prop: "photo",
      label: "头像",
      attrs: {
        width: "70px",
      },
      image: true,
    },
    {
      prop: "name",
      label: "姓名",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "mobile",
      label: "手机号",
    },

    {
      prop: "departmentName",
      label: "所属部门",
    },
    {
      prop: "roles",
      label: "所属岗位",
      slot: true,
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: "168px",
      },
    },
  ],
});

const emit = defineEmits(["close"]);
const handleClose = () => {
  emit('close')
}

onMounted(() => {
  getRoleList()
})
</script>

<style scoped></style>
